<template>
	<div class="newman">
		<div class="header">
			<a href="/">首页</a>
			<span>&gt;</span>
			<span>新手入门</span>
			<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/menu.png">
		</div>
		<div class="fly">
			<ul class="myul">
				<router-link to="/Rumen/Choose">
					<li>
						<img src="http://img.szzhangchu.com/1462847693264_6753686672.png" >
						<p>食材选储</p>
					</li>
				</router-link>		
				<router-link to="/Rumen/Dispose">
					<li>
						<img src="http://img.szzhangchu.com/1462765476030_7114284859.png">
						<p>食材处理</p>
					</li>
				</router-link>	
				<router-link to="/Rumen/Hand">
					<li>
						<img src="http://img.szzhangchu.com/1465006389038_3277876080.png">
						<p>手工自制</p>
					</li>
				</router-link>
				<router-link to="/Rumen/Cookie">
					<li>
						<img src="http://img.szzhangchu.com/1465031322357_5730856252.png">
						<p>烹饪技巧</p>
					</li>
				</router-link>	
				<router-link to="/Rumen/Amazing">
					<li>
						<img src="http://img.szzhangchu.com/1465194419552_1662326453.png">
						<p>厨房神器</p>
					</li>
				</router-link>	
				<router-link to="/Rumen/Bj">
					<li>
						<img src="http://img.szzhangchu.com/1465200752185_5439128870.png">
						<p>食用保健</p>
					</li>
				</router-link>
			</ul>
		</div>
		<router-view>
			
		</router-view>
		
	</div>
</template>

<script>

</script>

<style>
#newman{
	font-size: .2rem;
}
.header{
	width: 100%;
	height: 0.8rem;
	position: relative;
	line-height: 0.8rem;
	font-size: .3rem;
	padding: 0 0 0 .2rem;
}
.header img{
	width: 0.7rem;
	position: absolute;
	right: 0
}
.header>a{
	color: black;
}
.fly{
	width: 100%;
}
ul::-webkit-scrollbar {
	display:none
}
.myul{
	display: flex;
	height: 1.5rem;
	overflow-x: auto;
	overflow-y: hidden;
}
.myul li{
	width: 1.45rem;
	height: 1.5rem;
	text-align: center;
}
li img{
	width: .8rem;
	height: 0.8rem;
	margin: .1rem 0 0 0;
}
li p{
	color: #999;
}
p:hover{
	color: red;
}
</style>